<!-- 开锁中 -->
<template>
  <div class="payOrderContainer" style="height: 100vh">
    <!-- 扣款列表 -->
    <div class="cardItem" v-for="(item, index) in orderDetail" :key="index">
      <div class="cardLeft">
        <div class="billInfo">
          <span>{{ item.title }}</span>
          <img
            v-if="item.tips"
            @click="goRule"
            :data-tips="item.tips"
            class="questionIcon"
            src="../../images/wenhao.png"
          />
        </div>
        <div class="desc" style="line-height: 44rpx">
          <div v-for="(j, index) in item.lines" :key="index">{{ j }}</div>
        </div>
      </div>
      <div class="cardRight amount">{{ item.amount }}元</div>
    </div>
    <!-- 活动抵扣 -->
    <div
      class="cardItem discount"
      v-for="(item, index) in promoDetail"
      :key="index"
    >
      <div class="cardLeft">
        <span>{{ item.title }}</span>
        <div class="desc" style="color: #ff6e2a; line-height: 44rpx">
          <div v-for="(j, index) in item.lines" :key="index">{{ j }}</div>
        </div>
      </div>
      <div class="cardRight">
        <template v-if="item.amount && item.amount > 0">
          <span>-{{ item.amount }}元</span>
        </template>
      </div>
    </div>

    <!-- 卡券优惠 -->
    <div
      class="cardItem discount noBefore"
      v-if="recCoupon.couponType && recCoupon.couponType.code != 'DISABLE'"
    >
      <div class="cardLeft" style="display: flex">
        <span>卡券优惠</span>
        <span
          class="discountDesc"
          v-if="recommend && recCoupon && recCoupon.discountAmount > 0"
          >已选推荐优惠</span
        >
      </div>
      <div class="cardRight">
        <template
          v-if="recCoupon && recCoupon.discountAmount > 0"
          @click="goDiscount"
        >
          <span>-{{ recCoupon.discountAmount }}元</span>
          <img class="arrow" src="../../images/arrowRight@3x.png" />
        </template>
        <template
          @click="goDiscount"
          v-if="recCoupon.couponType.code == 'DISABLED_COUPON'"
        >
          <span class="noCardTxt">无可用优惠</span>
          <img class="arrow" src="../../images/arrowRight@3x.png" />
        </template>
        <template
          @click="goDiscount"
          v-if="recCoupon.couponType.code == 'NO_COUPON'"
        >
          <span class="noCardTxt">未使用优惠</span>
          <img class="arrow" src="../../images/arrowRight@3x.png" />
        </template>
      </div>
    </div>
    <div class="swiperArea">
      <md-swiper
        class="swiper"
        :autoplay="2000"
        :is-prevent="false"
        ref="swiper"
      >
        <md-swiper-item :key="$index" v-for="(item, $index) in list">
          <div class="swiper-item">
            <div class="callOut">
              {{ item.recommendText }}
              <div class="arrow_down"></div>
            </div>
            <div class="swiperLeft">
              <div class="swiperTitle">
                {{ item.name }}
              </div>
              <div class="swiperDesc" @click="ruleDialogShow">
                {{ item.description }}>
              </div>
            </div>
            <div class="swiperRight" v-on:click="select(item, $index)">
              <div class="price">{{ item.price }}元</div>
              <img
                class="checkIcon"
                v-if="!item.select"
                src="../../images/check.png"
              />
              <img class="checkIcon" v-else src="../../images/checked.png" />
            </div>
          </div>
        </md-swiper-item>
      </md-swiper>
    </div>
    <!-- 总计 -->
    <div class="total">
      <div class="totalItem">
        <div>合计：</div>
        <div class="totalAmount">{{ payAmount }}</div>
        <div>元</div>
      </div>
    </div>
    <div class="bottomArea">
      <div class="bottomButton" v-if="!setUp" @click="upCashier">立即支付</div>
      <div class="bottomButton" style="opacity: 0.4" v-else>立即支付</div>
    </div>

    <md-popup v-model="chooseSize" position="bottom" @hide="hideModal">
      <div class="contaniner-box" v-if="dialogType == 'payPage'">
        <div class="payTitle">
          <div>选择支付方式</div>
          <img
            class="closeIcon"
            src="../../images/dialogClose.png"
            @click="hideModal"
          />
        </div>
        <div class="payList">
          <div
            class="payItem"
            v-for="(item, index) in methods"
            :key="index"
            v-on:click="checkPayType(item)"
          >
            <div class="payLeft">
              <img
                class="walletIcon"
                v-if="item.code == 'WALLET'"
                src="../../images/wallet.png"
              />
              <img
                class="walletIcon"
                v-if="item.code == 'WECHATNOPWD'"
                src="../../images/wxPay.png"
              />
              <img
                class="walletIcon"
                v-if="item.code == 'WECHAT'"
                src="../../images/wxPay2.png"
              />
              <img
                class="walletIcon"
                v-if="item.code == 'UNIONUNCONSCIOUSPAY'"
                src="../../images/yunshanfu.png"
              />
              <div class="payLeft_text">
                <div style="display: flex; align-items: center">
                  <span>{{ item.name }}</span>
                  <div class="recommond" v-if="item.isRec">
                    <span>推荐</span>
                    <div class="arrow_left"></div>
                  </div>
                </div>
                <div class="warnTips" v-if="item.tips">{{ item.tips }}</div>
              </div>
            </div>
            <div class="payRight" v-if="item.enabled">
              <div style="margin-right: 0.16rem; font-size: 0.26rem">
                {{ item.descr || "" }}
              </div>
              <img
                src="../../images/trueIcon.png"
                style="width: 0.4rem"
                v-if="check === item.code"
              />
              <div class="circle" v-if="check !== item.code"></div>
            </div>
            <div class="payRight" v-if="!item.enabled">
              <div style="margin-right: 0.16rem; font-size: 0.26rem">
                {{ item.descr || "" }}
              </div>
              <div class="circle disabledCircle"></div>
            </div>
          </div>
          <div class="more" v-if="hideMethods.length > 0" @click="showHideList">
            <img class="dot" src="../../images/dot.png" />
            <div>更多支付方式</div>
          </div>
        </div>
        <template v-if="!useDirectly && check == 'WALLET'">
          <div
            class="bottomButton"
            v-if="!rechargeStatus"
            @click="goRecharge"
            style="margin-top: 40rpx"
          >
            立即充值
          </div>
          <div class="bottomButton" style="opacity: 0.4" v-else>
            前往充值...
          </div>
        </template>
        <template v-else>
          <div
            class="bottomButton"
            v-if="!payStatus"
            @click="cashierPay"
            style="margin-top: 0.4rem"
          >
            确认支付{{ payAmount }}元
          </div>
          <div class="bottomButton" style="opacity: 0.4" v-else>
            正在支付...
          </div>
        </template>
      </div>
      <div class="contaniner-box" v-if="dialogType == 'waitPage'">
        <div class="waitBox">
          <img class="loadingImg" src="../../images/loading.png" />
          <div class="waitTitle" style="padding-bottom: 1.28rem">
            支付结果查询中...
          </div>
        </div>
      </div>
      <div class="contaniner-box" v-if="dialogType == 'failPage'">
        <div class="waitBox">
          <img style="width: 1.2rem" src="../../images/warn.png" />
          <div class="waitTitle" style="margin-top: 0.4rem">
            没有查询到支付结果
          </div>
          <div class="failTips">
            若已确认支付，请刷新；如急需用车，请更换支付方式进行支付(重复支付金额将原路退回)
          </div>
        </div>
        <div class="bottomRow">
          <div class="refresh" style="margin-right: 0.3rem" @click="refesh">
            刷新
          </div>
          <div class="resetPay" @click="resetPay">更换支付方式</div>
        </div>
      </div>
    </md-popup>
  </div>
</template>

<script>
/* eslint-disable */
import payOrder from "./payOrder.js";
export default {
  mixins: [payOrder],
  data() {
    return {};
  },
};
</script>

<style scoped lang="stylus">
@import './payOrder.styl';
</style>
